<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.thymeleaf.org/thymeleaf-extras-shiro"
>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<style>
    html,body {
        margin: 0;
        height: 100%;
    }
    .el-container {
        width: 100%;
        min-height: 100vh!important;
        display: flex;
        flex-direction: column;
        justify-content:space-between;
    }
    .el-header {
        display: flex;
        height: 4vh;
        width: 100%;
        align-items: center !important;
        /*text-align: center;*/
        justify-content: center;
    }
</style>

</head>
<body>
<div id="app">
<!--    <h4 th:text="${session.username}" style="margin-left: 95% !important;"></h4>-->
    <el-container direction="vertical" style="margin: 0px !important;height: 100vh">
        <el-header style="background: #fff;">
            <el-col :span="24">
    <el-button style="margin-left: 90% !important;"  type="primary" @click="test">新建</el-button>
            </el-col>
        </el-header>
<!--    <a th:href="@{/todoPage}" >待办任务</a>-->
    <el-table :data="tableData" style="width: 100%" border stripe>

        <el-table-column prop="title" label="姓名" width="180" align="center" > </el-table-column>
        <el-table-column prop="reason" label="原因" width="180" align="center"> </el-table-column>
        <el-table-column prop="createBy" label="创建人" width="180" align="center"> </el-table-column>
        <el-table-column prop="todoManId" label="待办人" width="180" align="center"> </el-table-column>
        <el-table-column prop="taskName" label="当前任务名称" width="180" align="center"> </el-table-column>
        <el-table-column prop="startTime" label="开始时间" width="180" align="center" :formatter="startTimeFormatter"> </el-table-column>
        <el-table-column prop="endTime" label="结束时间" width="180" align="center" :formatter="endTimeFormatter"> </el-table-column>
      <!--  <el-table-column  label="姓名" width="180">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.reason }}</span>
                &lt;!&ndash;<el-popover trigger="hover" placement="top">
                    <p>姓名: {{ scope.row.name }}</p>
                    <p>住址: {{ scope.row.address }}</p>
                    <div slot="reference" class="name-wrapper">
                        <el-tag size="medium">{{ scope.row.name }}</el-tag>
                    </div>
                </el-popover>&ndash;&gt;
            </template>
        </el-table-column>-->
        <el-table-column label="操作" align="center">
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        type="success"
                        @click="submitTaskhandleClose(scope.$index, scope.row)" v-if="scope.row.instanceId==null">提交申请
                </el-button>
                <el-button
                        size="mini"
                        type="warning"
                        @click="hisHandleClose(scope.$index, scope.row)" v-if="scope.row.instanceId!=null">审批历史
                </el-button>
                <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)" v-if="scope.row.instanceId==null">删除
                </el-button>
                <el-button
                        size="mini"
                        type="info"
                        @click="revision(scope.$index, scope.row)" v-if="scope.row.instanceId!=null && scope.row.taskName != '已结束'">撤销
                </el-button>
            </template>
        </el-table-column>
    </el-table>
<!--    弹窗-->
<!--    <el-link type="success" @click="test">主要链接</el-link>-->
    <el-dialog
            title="创建流程" :visible.sync="dialogVisible" width="80%" height="100%" :before-close="handleClose">
        <el-form  ref="form" :model="sizeForm" label-width="80px" size="mini">
            <el-form-item label="标题">
                <el-input v-model="sizeForm.title"></el-input>
            </el-form-item>
            <el-form-item label="原因">
                <el-input type="textarea"
                          :autosize="{ minRows: 2, maxRows: 4}"
                          placeholder="请输入内容" v-model="sizeForm.reason"></el-input>
            </el-form-item>
            <el-form-item label="待办人">
                <el-select v-model="sizeForm.todoManId" placeholder="待办负责人">
                    <el-option label="admin" value="admin"></el-option>
                    <el-option label="人事1" value="人事1"></el-option>
                    <el-option label="人事2" value="人事2"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="时间">
                <el-col :span="11">
                    <el-date-picker format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"
                                    type="datetime" placeholder="选择日期" v-model="sizeForm.startTime" style="width: 100%;"></el-date-picker>
                </el-col>
                <el-col class="line" :span="2">-</el-col>
                <el-col :span="11">
                    <el-date-picker  format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"
                                    type="datetime" placeholder="选择日期" v-model="sizeForm.endTime" style="width: 100%;"></el-date-picker>
                </el-col>
               <!-- <el-col :span="11">
                    <el-time-picker placeholder="选择时间" v-model="sizeForm.date2" style="width: 100%;"></el-time-picker>
                </el-col>-->
            </el-form-item>
      <!--      <el-form-item size="large">
                <el-button type="primary" @click="onSubmit">立即创建</el-button>
                <el-button>取消</el-button>
            </el-form-item>-->
        </el-form>
        <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit">确 定</el-button>
        <el-button type="primary" @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
<!--    提交申请  width="60%"-->
   <!-- <el-dialog
            title="提示"
            width="30%"
            :visible.sync="submitTaskVisible"
            :before-close="submitTaskhandleClose">
        <span style="text-align: center" v-if="rowData.instanceId == null">是否提交申请</span>
        <span slot="footer" class="dialog-footer">
    <el-button @click="submitTaskVisible = false">取 消</el-button>
    <el-button type="primary" @click="submitTask">确 定</el-button>
  </span>
    </el-dialog>-->
    <el-dialog
            top="30px"
            title="历史记录"
            width="60%"
            :visible.sync="historyVisible">
        <div style="height: 600px" v-if="rowData.instanceId != null" class="block">
            <el-timeline>
                <el-timeline-item v-for="item in hisData" :timestamp="item.endTime" placement="top">
                    <el-card >
                        <h4 >{{item.activityName}}</h4>
                       <p><span v-if="item.endTime == null" th:text="未审核" style="color: red"></span>
                        <span v-if="item.endTime != null && item.activityType != 'endEvent'" th:text="已审核" style="color: green"></span>  &nbsp;&nbsp;
                      <lable v-if="item.endTime != null && item.activityType != 'endEvent'">处理人：<span>{{item.assigneeName}}</span></lable></p>
                    </el-card>
                </el-timeline-item>
            </el-timeline>
        </div>
        <span slot="footer" class="dialog-footer">
  </span>
    </el-dialog>
    <!--    <h2 class="ui  header m-font-thin m-inline-block broadcast" th:text="${msg}">118</h2>-->
    </el-container>
</div>

</body>

<script type="text/javascript" th:src="@{/js/json2.js}"></script>
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> &lt;!&ndash;vue要放在element ui前面&ndash;&gt;-->
<script th:src="@{/js/vue.js}"></script> <!--vue要放在element ui前面-->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript" th:src="@{/js/jquery-1.8.3.min.js}"></script>
<script language='javascript' th:inline="javascript">
    new Vue({
        el: '#app',
        data: function () {
            return {
                tableData: [],
                name: "indexJK",
                dialogVisible: false, //弹出框
               submitTaskVisible: false,
                historyVisible:false,
                rowData:{},
                hisData:[],
                sizeForm: {
                    title: '',
                    reason: '',
                    startTime: '',
                    endTime: '',
                }
            }
        },
        created() {
            // this.initMessage()
            this.init()
            // this.getTabData();
        },
        methods: {
            hisHandleClose(done,row){
                _this = this
                if (this.historyVisible==false){
                    this.rowData = {}
                    this.rowData = row
                    _this = this
                    axios({
                        url: "/getHisData/"+row.instanceId,
                        data: "",
                        method: 'get',
                    }).then(res => {
                        _this.hisData = res.data.data
                        console.log(_this.hisData)
                    })
                    this.historyVisible=true
                }else{
                    this.historyVisible=false
                }
            },
            submitTaskhandleClose(done,row) {
               /* if (this.submitTaskVisible==false){
                    this.rowData = {}
                    this.submitTaskVisible=true
                    this.rowData = row
                }else{
                    this.submitTaskVisible=false
                }*/
                _this = this
                this.$confirm('是否提交申请', '提交', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    _this.rowData = {}
                    _this.rowData = row
                    _this.submitTask()
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });
            },
            startTimeFormatter(val){
                return this.TimeToStrDate(val.startTime);
            },
            endTimeFormatter(val){
                return this.TimeToStrDate(val.endTime);
            },
            // 时间戳转yy-MM-dd HH:mm:ss
            TimeToStrDate(time) {
                var dd = new Date(time); // 13位时间戳
                var y = dd.getFullYear();
                var m = (dd.getMonth() + 1) < 10 ? '0' + (dd.getMonth() + 1) : (dd.getMonth() + 1);//获取当前月份的日期，不足10补0
                var d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate(); //获取当前几号，不足10补0
                var h = dd.getHours() < 10 ? '0' + dd.getHours() : dd.getHours();
                var n = dd.getMinutes() <10 ? '0' + dd.getMinutes() : dd.getMinutes();
                var s = dd.getSeconds() <10 ? '0' + dd.getSeconds() : dd.getSeconds();
                return y + '-' + m + '-' + d + ' ' + h + ':' + n + ':' + s;
            },
            handleClose(){this.dialogVisible = false},
            test() {
                this.dialogVisible = true;
            },
            handleEdit(index, row) {
                // console.log(index, row);
            },
            handleDelete(index, row) {
                // console.log(index, row);
            },
            init() {
                axios({
                    url: "/getData",
                    data: '',
                    method: 'get',
                    params: {},
                }).then(res => {
                    this.tableData = res.data.data.list
                    // this.formInline.message = res.data
                })
               /* this.$message({
                    showClose: true,
                    message: [[${msg}]],
                    type: 'success'
                });*/
            },
            initMessage() {
                axios({
                    url: "/ele/getTask",
                    data: '',
                    method: 'get',
                    params: {},
                }).then(res => {
                    this.formInline.message = res.data
                })
            },
            onSubmit() {
                _this = this
                axios({
                    url: "/save",
                    // data: JSON.stringify(_this.sizeForm),
                    data: _this.sizeForm,
                    method: 'post',
                    // params: {'message': this.formInline.message},
                }).then(res => {
                    _this.dialogVisible = false
                    _this.init()
                    var msg = res.data
                    this.$message({
                        showClose: true,
                        // message: [[${msg}]],
                        message: msg,
                        type: msg
                    });
                })
            },
            submitTask(){
                _this = this
                axios({
                    url: "/submitTask",
                    data: this.rowData,
                    method: 'post',
                }).then(res => {
                    console.log(res.data.message)
                    _this.submitTaskVisible = false
                    var msg = res.data.message
                    this.$message({
                        showClose: true,
                        message: msg,
                        type: msg
                    });
                })
            },
            revision(index, row){///cancelApply
                // console.log(row)
                _this =this
                axios({
                    url: "/cancelApply/"+row.instanceId,
                    data: '',
                    method: 'post',
                    contentType: "application/json",
                }).then(res => {
                    var type = res.data.code==20000?'success':'error'
                    this.$message({
                        showClose: true,
                        message: res.data.message,
                        type: type
                    });
                    _this.init()
                })
            }

        }
    })
</script>
<style>
    .is-selected {
        color: #1989FA;
    }
    .el-dialog__body {
     /*   position: absolute;
        left: 0;
        top: 54px;
        bottom: 0;
        right: 0;
        padding: 0;
        z-index: 1;
        overflow: hidden;
        height: 300px;*/
        overflow-y: auto;

    }
</style>
</html>